<template>
  <div>
    <el-card class="box-card">
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column fixed="right" label="" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="Userdialog(scope.row.id, scope.row)"
              >>授权权限</el-button
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="Channedialog(scope.row.id, scope.row)"
              >>授权频道</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 用户管理对话框对话框 -->
    <el-dialog
      title=""
      :visible.sync="UserdialogVisible"
      width="30%"
      :before-close="UserhandleClose"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          :label="item.id"
          v-for="item in routerList"
          :key="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="UserhandleClose">取 消</el-button>
        <el-button type="primary" @click="UserButton()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 频道对话框对话框 -->
    <el-dialog
      title=""
      :visible.sync="ChannedialogVisible"
      width="30%"
      :before-close="ChanneClose"
    >
      <el-checkbox v-model="checked" @change="checkedFn">全选</el-checkbox>
      <el-checkbox-group v-model="UserchanneLIst">
        <el-checkbox
          :label="item.id"
          v-for="item in channeLIst"
          :key="item.id"
          >{{ item.Initiator_name }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ChanneClose">取 消</el-button>
        <el-button type="primary" @click="ChanneButton()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  ajaxInitiator,
  sipInitiatorPut,
  sipInitiatorAdd,
  sipInitiatorDel,
} from "@/api/sip";
import { getRouter, getUser, putUser } from "@/api/user";
import store from "@/store/modules/user";
import { logger } from "runjs/lib/common";
export default {
  created() {
    this.user_init();
    this.InitiatorDataInit();
  },
  data() {
    return {
      userList: [],
      UserdialogVisible: false,
      ChannedialogVisible: false,
      checked: false,
      routerList: [],
      checkList: [],
      channeLIst: [],
      UserchanneLIst: [],
    };
  },
  methods: {
    //获取用户表
    async user_init() {
      let res = await getUser();
      this.userList = res.data.data.data;
    },
    async InitiatorDataInit() {
      let name = JSON.parse(localStorage.getItem("HSKJ-username"));
      const res = await ajaxInitiator({ userChanne: name });
      this.channeLIst = res.data.meta.data;
    },
    //频道全选
    checkedFn() {
      if (this.checked === true) {
        this.UserchanneLIst = [];
        this.channeLIst.forEach((item) => {
          this.UserchanneLIst.push(item.id);
        });
      }
      if (this.checked === false) {
        this.UserchanneLIst = [];
      }
    },
    //用户对话框
    async Userdialog(id, data) {
      this.userId = id;
      //获得权力数组
      let check = data.power.split(",");
      //循环赋值
      check.forEach((item) => {
        this.checkList.push(Number(item));
      });
      let res = await getRouter();
      this.routerList = res.data.data.data;
      this.UserdialogVisible = true;
    },
    //授权频道对话框
    async Channedialog(id, data) {
      this.userId = id;
      //获得频道数组
      let check = data.ChanneLlist.split(",");
      //循环赋值
      check.forEach((item) => {
        this.UserchanneLIst.push(Number(item));
      });
      this.ChannedialogVisible = true;
    },
    async UserButton() {
      let newRouterList = [];

      // 浅拷贝
      let data = Array.from(this.checkList);

      data.forEach((item) => {
        newRouterList.push(item);
      });

      let filterRouterList =  newRouterList.filter(item=>{return item !== 0})


      //数据处理
      let res = await putUser({
        id: this.userId,
        power: String(filterRouterList),
      });
      if (res.status === 200) {
        this.$message.success("授权成功 请重新登录");
        this.UserdialogVisible = false;
        //成功也清空数组
        this.checkList = [];
        //重新渲染用户列表
        this.user_init()
      }
    },
    async ChanneButton() {
      let newChanneList = [];
      // 浅拷贝
      let data = Array.from(this.UserchanneLIst);
      data.forEach((item) => {
        newChanneList.push(item);
      });

      let filterChanneList =  newChanneList.filter(item=>{return item !== 0})

      //数据处理
      let res = await putUser({
        id: this.userId,
        ChanneLlist: String(filterChanneList),
      });
      if (res.status === 200) {
        this.$message.success("授权成功 请重新登录");
        this.ChannedialogVisible = false;
        //成功也清空数组
        this.UserchanneLIst = [];
        this.user_init();
      }
    },
    //关闭权限对话框
    UserhandleClose() {
      this.UserdialogVisible = false;
      //关闭清空选择数组
      this.checkList = [];
    },
    //关闭频道对话框
    ChanneClose() {
      this.ChannedialogVisible = false;
      this.UserchanneLIst = [];
    },
  },
};
</script>

<style></style>
